<oem-drawer _COMPONENT_NAME_ATTR_="{{section_id}}">
  <oem-drawer-label>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="feather feather-menu"
    >
      <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  </oem-drawer-label>
  <oem-drawer-popup>
    <oem-drawer-popup-warp position="left" style='--drawer-popup-bg:{{data.nav_bg}}; --font-color:{{data.menu_color}};'>
      <div class="h-screen flex flex-col" style="width:80vw">
        <div class="p-5">
          {% include 'serach/format_2', data: data %}
        </div>
        <div class="px-5 flex-1 overflow-y-auto">
          <div class="only-warp">
            <ul class="panel-menu-ul only-warp-menu">
              {% if header_nav.size > 0 %}
                {% for item in header_nav.nav_item %}
                  <li class="panel-menu-item only-ul-li">
                    {% include 'basic/nav_a', nav: item, class: ' panel-navigation' %}
                    {% if item.children %}
                      <div class="et-menu-toggle">
                        <svg
                          t="1646295528525"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="3178"
                          width="24"
                          height="24"
                        >
                          <path d="M319.4368 114.8928a43.5712 43.5712 0 0 0 0 60.5696l324.1984 332.8-324.1984 332.8a43.5712 43.5712 0 0 0 0 60.5696 40.96 40.96 0 0 0 58.9312 0l353.6896-363.1104a43.5712 43.5712 0 0 0 0-60.5696L378.368 114.8928a40.96 40.96 0 0 0-58.9312 0z" fill="currentColor" p-id="3179"></path>
                        </svg>
                      </div>
                      <ul class="panel-menu-ul only-ul only-ul-left100">
                        <li class="panel-menu-item panel-menu-parent">
                          <svg
                            t="1646361137821"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2881"
                            width="22"
                            height="22"
                          >
                            <path d="M704.5632 909.1072a43.5712 43.5712 0 0 0 0-60.5696l-324.1984-332.8 324.1984-332.8a43.5712 43.5712 0 0 0 0-60.5696 40.96 40.96 0 0 0-58.9312 0l-353.6896 363.1104a43.5712 43.5712 0 0 0 0 60.5696L645.632 909.1072a40.96 40.96 0 0 0 58.9312 0z" fill="currentColor" p-id="2882"></path>
                          </svg>
                          <span class="padding-left-14">{{ item.nav_item_name }}</span>
                        </li>
                        {% for el in item.children %}
                          <li class="panel-menu-item only-ul-li">
                            {% include 'basic/nav_a', nav: el, class: ' panel-navigation' %}
                            {% if el.children %}
                              <div class="et-menu-toggle">
                                <svg
                                  t="1646295528525"
                                  class="icon"
                                  viewBox="0 0 1024 1024"
                                  version="1.1"
                                  xmlns="http://www.w3.org/2000/svg"
                                  p-id="3178"
                                  width="24"
                                  height="24"
                                >
                                  <path d="M319.4368 114.8928a43.5712 43.5712 0 0 0 0 60.5696l324.1984 332.8-324.1984 332.8a43.5712 43.5712 0 0 0 0 60.5696 40.96 40.96 0 0 0 58.9312 0l353.6896-363.1104a43.5712 43.5712 0 0 0 0-60.5696L378.368 114.8928a40.96 40.96 0 0 0-58.9312 0z" fill="currentColor" p-id="3179"></path>
                                </svg>
                              </div>
                              <ul class="panel-menu-ul only-ul only-ul-left100">
                                <li class="panel-menu-item panel-menu-parent">
                                  <svg
                                    t="1646361137821"
                                    class="icon"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="2881"
                                    width="22"
                                    height="22"
                                  >
                                    <path d="M704.5632 909.1072a43.5712 43.5712 0 0 0 0-60.5696l-324.1984-332.8 324.1984-332.8a43.5712 43.5712 0 0 0 0-60.5696 40.96 40.96 0 0 0-58.9312 0l-353.6896 363.1104a43.5712 43.5712 0 0 0 0 60.5696L645.632 909.1072a40.96 40.96 0 0 0 58.9312 0z" fill="currentColor" p-id="2882"></path>
                                  </svg>
                                  <span class="padding-left-14">{{ el.nav_item_name }}</span>
                                </li>
                                {% for sel in el.children %}
                                  <li class="panel-menu-item only-ul-li">
                                    {% include 'basic/nav_a', nav: sel, class: ' panel-navigation' %}
                                  </li>
                                {% endfor %}
                              </ul>
                            {% endif %}
                          </li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </li>
                {% endfor %}
              {% else %}
                <li class="panel-menu-item">
                  <a class="panel-navigation" href="/">Home</a>
                </li>
                <li class="panel-menu-item">
                  <a class="panel-navigation" href="/collections">Collections</a>
                </li>
                <li class="panel-menu-item">
                  <a class="panel-navigation" href="/search">Search</a>
                </li>
                <li class="panel-menu-item">
                  <a class="panel-navigation" href="/collections/all">Product</a>
                </li>
              {% endif %}
            </ul>
          </div>
        </div>

        <div class="p-5 flex justify-between items-center">
          <a href="/account/login" class=" text-inherit ">
            <svg
              aria-hidden="true"
              role="img"
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
            </svg>
          </a>
          <select class="mobile_currency-select bg-zinc-200">
            {% get_currencies limit=100 %}
            {% for list in currencies %}
            <option value="{{ list.standard_code }}">
              {{ list.standard_code }} : {{ list.symbol_left }}{{ list.symbol_right }}
            </option>
            {% endfor %}
          </select>
        </div>

      </div>
    </oem-drawer-popup-warp>
    <oem-drawer-close class="oem-drawer-popup-mask"></oem-drawer-close>
  </oem-drawer-popup>
</oem-drawer>


<script>
  $(function(){
    $.componentHandle(_COMPONENT_NAME_, {id:"{{section_id}}"})
  })
</script>